<template>
  <div class="caseComplaintsbody">
    <div class="header-1">
      <div class="header-1-1">
        <div class="tou"></div>
        <span>查询条件</span>
      </div>
    </div>
    <!-- 筛选 -->
    <el-form style="margin-left: 20px; font-size: 12px" size="mini" label-width="80px" :data="Thequery"
      :model="Thequery" class="invoice">
      <el-form-item size="mini" label="工单号">
        <el-input style="width: 100px" v-model="Thequery.caseId"></el-input>
      </el-form-item>
      <el-form-item size="mini" label="状态">
        <el-select clearable v-model="Thequery.caseStatus" size="mini" placeholder="请选择" style="width: 120px">
          <el-option v-for="item in condition" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item size="mini" label="开始时间">
        <el-date-picker :value-format="format" size="mini" style="width: 140px" v-model="CX.date1" type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item size="mini" label="结束时间">
        <el-date-picker :value-format="format" size="mini" style="width: 140px" v-model="CX.date2" type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item size="mini" label="订单号">
        <el-input onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')" style="width: 120px" size="mini"
          v-model="Thequery.orderId"></el-input>
      </el-form-item>
    </el-form>
    <el-form style="margin-left: 50px; font-size: 14px" size="mini" :inline="true" :data="Thequery" :model="Thequery"
      class="invoice">
      <el-form-item size="mini" label="工单类型">
        <el-select clearable v-model="Thequery.orderType" size="mini" placeholder="请选择" style="width: 120px">
          <el-option v-for="item in mold" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <div class="invoice-1"></div>
      <!-- <el-form-item size="mini" label="手机号">
         <el-input
            onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
            style="width: 120px"
            v-model="Thequery.phone"
            size="mini"
          ></el-input>
      </el-form-item> -->
      <div class="invoice-1">
        <!-- <el-form-item size="mini" label="会员id">
             <el-input
            onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
            style="width: 120px"
            v-model="Thequery.customerId"
            size="mini"
          ></el-input>
           </el-form-item> -->
      </div>
      <div>
        <el-button style="color: #fff; width: 60px" size="mini" type="primary" @click="seachBtn">查询
        </el-button>
        <el-button type="primary" style="color: #fff; width: 60px" size="mini" @click="centerDialogVisible = true">新增
        </el-button>
      </div>
    </el-form>
    <!-- 表格 -->
    <div class="header-1">
      <div class="tuo">
        <div class="tuo-1">
          <div class="tuo-2"></div>
          <span>工单列表</span>
        </div>
      </div>
      <!-- 订单列表 -->
      <div class="table">
        <el-table border size="mini" ref="multipleTable" :data="Therepairorder" :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }" :row-style="{ height: '40px' }" tooltip-effect="dark">
          <el-table-column prop="caseComplaintId" label="工单号" width="100">
          </el-table-column>
          <!-- <el-table-column prop="orderType" label="工单类型" width="144">
            <template slot-scope="scope">
              <template v-if="scope.row.orderType == 'hotel'">酒店</template>
              <template v-if="scope.row.orderType == 'flight'">机票</template>
              <template v-if="scope.row.orderType == 'service'">贵宾厅</template>
              <template v-if="scope.row.orderType == 'train'">火车票</template>
              <template v-if="scope.row.orderType == 'customer'">会员</template>
            </template>
          </el-table-column> -->
          <el-table-column prop="caseTypeId" label="工单类型" width="100">
            <template slot-scope="scope">
              <template v-for="(item,index) in workOrderType" v-if="scope.row.caseType == item.value">
                {{ item.label }}
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="caseSubject" label="工单标题" width="160">
          </el-table-column>
          <el-table-column prop="caseSubject" label="工单分类" width="100">
            <template slot-scope="scope">
              <template v-for="(item, index) in orderLedger" v-if="scope.row.cardTypeId == item.caseTypeId">
                {{ item.caseTypeName }}
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="caseContent" label="工单内容" width="160">
          </el-table-column>
       
          <el-table-column prop="deptName" label="创建部门" width="84">
          </el-table-column>
              <el-table-column prop="createEmployeeName" label="创建人" width="84">
          </el-table-column>
          <el-table-column prop="caseCreateTime" label="创建时间" >
          </el-table-column>
          <el-table-column prop="receivingDepartment" label="接收部门" width="100">
          </el-table-column>
          <!-- <el-table-column prop="receivePost" label="接收岗位" width="100">
          </el-table-column> -->
          <el-table-column prop="receiver" label="接收人" width="90">
          </el-table-column>
          <el-table-column prop="orderType" label="订单类型" width="120">
            <template slot-scope="scope">
              {{ scope.row.orderType == "flight" ? "机票" : scope.row.orderType == "train" ? "火车票": scope.row.orderType == "hotel" ? "酒店" : scope.row.orderType == "service" ? "贵宾厅": scope.row.orderType == "customer" ? "会员":''}}
            </template>
          </el-table-column>
          <el-table-column prop="orderId" label="订单号" width="160">
          </el-table-column>
          <el-table-column prop="pri" label="紧急" width="70">
            <template slot-scope="scope">
              <template>
                {{ scope.row.pri == "0" ? "普通" : "紧急" }}
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="caseStatus" label="状态" width="80">
            <template slot-scope="scope">
              <template>
                {{
                  scope.row.caseStatus == "1"
                    ? "处理完"
                    : scope.row.caseStatus == "2"
                    ? "废弃"
                    : "待处理"
                }}
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="操作" width="90" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" style="background-color: #6090ec; color: #fff"
                @click="Workorderdetails(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!-- 新建工单 -->
    <el-dialog title="创建投诉工单" :visible.sync="centerDialogVisible" :close-on-click-modal="false" width="78%" center>
      <div class="caseComplaints">
        <!-- 上 -->
        <div>
          <div class="flex">
            <div class="flex_a">
              <div class="tdboder td-1">会员手机</div>
              <div>
                <el-input size="mini" v-model="customerrepairorder.customerPhone" placeholder="请输入手机号查询会员信息"></el-input>
              </div>
            </div>
            <div class="flex_a">
              <div class="tdboder td-1">会员卡号</div>
              <div>
                <el-input size="mini" v-model="customerrepairorder.customerCard"></el-input>
              </div>
            </div>
            <div class="flex_a">
              <div class="tdboder td-1">会员姓名</div>
              <div>
                <el-input size="mini" v-model="customerrepairorder.customerName"></el-input>
              </div>
            </div>
            <div class="flex_a">
              <div class="tdboder td-1">会员卡类型：</div>
              <div>
                <!-- <el-input :disabled="true" size="mini" v-model="customerrepairorder.customerName" ></el-input> -->
                <el-select size="mini" style="200px" v-model="customerrepairorder.level" placeholder="请选择" clearable>
                  <el-option v-for="item in cardTypeList" :key="item.value" :label="item.cardSectionName"
                    :value="item.cardId">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="flex_a">
              <el-button size="mini" type="primary" @click="thequery">查询</el-button>
            </div>
          </div>
          <!-- 2 -->
          <div class="flex">
            <div class="flex_a">
              <div class="tdboder td-1">工单类型:</div>
              <div>
                <el-select clearable size="mini" style="200px" v-model="repairOrder.workOrderType" placeholder="请选择">
                  <el-option v-for="item in gongdanType" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="flex_a">
              <div class="tdboder td-1">工单分类:</div>
              <div>
                <el-select size="mini" clearable v-model="repairOrder.caseTypeId" placeholder="请选择">
                  <el-option v-for="item in orderLedger" :key="item.value" :label="item.caseTypeName"
                    :value="item.caseTypeId">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="flex_a">
              <div class="tdboder td-1">工单小类</div>
              <div>
                <el-select size="mini" style="200px" v-model="repairOrder.caseSubType" placeholder="请选择" clearable>
                  <el-option v-for="item in workOrderTypeList" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="flex_a">
              <div class="tdboder td-1">工单标题</div>
              <div>
                <el-input v-model="repairOrder.caseSubject" size="mini"></el-input>
              </div>
            </div>
          </div>
          <!-- 3 -->
          <div class="flex">
            <div class="tdboder td-1">工单内容</div>
            <div>
              <el-input type="textarea" style="width: 500px" :rows="2" placeholder="请输入内容"
                v-model="repairOrder.caseContent">
              </el-input>
            </div>
          </div>
          <!-- 4 -->
          <div class="flex">
            <div class="flex_a">
              <div class="tdboder td-1">期望完成时间:</div>
              <div>
                <el-date-picker size="mini" v-model="repairOrder.specifiedTime" type="datetime" placeholder="选择日期时间"
                  :value-format="format1">
                </el-date-picker>
              </div>
            </div>
            <!-- <div class="flex_a">
              <div class="tdboder td-1">创建部门</div>
              <div>
                <el-select size="mini" style="200px" v-model="repairOrder.receivingDepartment" placeholder="请选择"
                  @change="selectMent()" clearable>
                  <el-option v-for="item in departmentList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div> -->
            <!-- <div class="flex_a">
          <div class="tdboder td-1">创建人</div>
          <div> <el-input v-model="repairOrder.receiver" size="mini"></el-input></div>
        </div> -->
          </div>
        </div>
        <!-- 中间 -->
        <div>
          <div class="flex_x">
            <div class="flex_a">
              <div class="tdboder td-1">被投诉人:</div>
              <div>
                <el-select size="mini" v-model="repairOrder.complaintEmployeeid" placeholder="请选择">
                  <el-option v-for="(item, index) in postslists" :key="index" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="flex_a">
              <div class="tdboder td-1">投诉方式</div>
              <div>
                <el-select size="mini" style="200px" v-model="repairOrder.complainWay" placeholder="请选择" clearable>
                  <el-option v-for="item in MeansList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <!-- 2 -->
          <div class="flex_x">
            <div class="flex_a">
              <div class="tdboder td-1">投诉原因:</div>
              <div>
                <el-select size="mini" style="200px" v-model="repairOrder.complaintReason" placeholder="请选择" clearable>
                  <el-option v-for="item in ReasonList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="flex_a">
              <div class="tdboder td-1">投诉时间</div>
              <div>
                <el-date-picker size="mini" v-model="repairOrder.complaintDate" type="datetime" placeholder="选择日期时间"
                  :value-format="format">
                </el-date-picker>
              </div>
            </div>
          </div>
          <!-- 3 -->
          <div class="flex_x">
            <div class="flex_a">
              <div class="tdboder td-1">投诉分类</div>
              <div>
                <el-select size="mini" style="200px" v-model="repairOrder.complaintClassification" placeholder="请选择"
                  clearable>
                  <el-option v-for="item in complainClassifyList" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="flex_a">
              <div class="tdboder td-1">订单类型</div>
              <div>
                <el-select size="mini" clearable v-model="repairOrder.orderType" placeholder="请选择">
                  <el-option v-for="(item, index) in businessList" :key="index" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="flex_a">
              <div class="tdboder td-1">订单号</div>
              <div>
                <el-input size="mini" v-model="repairOrder.orderId" placeholder="订单号(必填)"></el-input>
              </div>
            </div>
          </div>
          <!-- 4 -->
          <!-- <div class="flex_y">
            <div class="flex_a">
              <div class="tdboder td-1">核实情况</div>
              <div>
                <el-input type="textarea"  :rows="4" v-model="repairOrder.customerPhone" size="mini"></el-input>
              </div>
            </div>
          </div> -->
        </div>
        <div class="flex_y">
          <div class="tdboder td-1">核实情况</div>
          <div>
            <el-input type="textarea" style="width: 500px" :rows="4" placeholder="请输入内容"
              v-model="repairOrder.customerPhone">
            </el-input>
          </div>
        </div>
        <!-- 赔偿金额 -->
        <div class="flex_y">
          <div class="tdboder td-1">赔偿金额</div>
          <div>
            <el-input size="mini" style="width: 200px" placeholder="请输入赔偿金额"
              v-model.trim="repairOrder.compensationAmount">
            </el-input>
          </div>
        </div>
        <!-- 投诉结果 -->
        <div style="display: flex">
          <div class="tdboder tousucss">投诉结果 :</div>
          <div class="tdboder">
            <div style="height: 190px"></div>
            <el-select size="mini" style="200px" v-model="compensationType" placeholder="请选择" clearable>
              <el-option v-for="item in ReaultList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="tdboder" style="width: 90%">
            <div style="margin: 60px">
              <div class="serviceCompensation" style="display: flex">
                <div class="service-left">服务赔偿</div>
                <div class="service-right">赔偿金额</div>
              </div>
              <div class="serviceCompensation-bottom" style="display: flex" v-for="(item, index) in compensateType"
                :key="index">
                <div class="service-left">
                  <el-checkbox @change="changeList(index)">{{
                    item.reimbType
                  }}</el-checkbox>
                </div>
                <div class="service-right">
                  <el-input size="mini" @input="compensationAmountList" v-model.trim="compensationAmounts[index]"
                    placeholder="请输入金额"></el-input>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex">
           <div class="tdboder td-1">处理结果</div>
          <div>
            <el-input size="mini" style="width: 500px" placeholder="请输入投诉结果"
              v-model.trim="repairOrder.solveContent">
            </el-input>
          </div>
        </div>
        <div class="flex_b">
          <el-button style="background-color: #f2f7fa" @click="casesave">保存</el-button>
          <el-button style="background-color: #f2f7fa" @click="centerDialogVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: "caseComplaintsbody",
    data() {
      return {
        // 工单类型
        mold: [{
            value: "hotel",
            label: "酒店",
          },
          {
            value: "flight ",
            label: "机票",
          },
          {
            value: "service ",
            label: "贵宾厅",
          },
          {
            value: "train ",
            label: "火车票",
          },
          {
            value: "customer ",
            label: "会员",
          },
        ],
        orderLedger: [],
        employeesInformation: {}, //员工信息
        format: "yyyy-MM-dd",
        format1: "yyyy-MM-dd HH:ss:mm",
        total: 0,
        // 订单类型
        businessList: [{
            value: "flight",
            label: "国内机票",
          },
          {
            value: "train",
            label: "火车票",
          },
          {
            value: "hotel",
            label: "酒店",
          },
          {
            value: "service",
            label: "贵宾厅",
          },
          {
            value: "VIPAisle",
            label: "vip通道",
          },
          {
            value: "checkIn",
            label: "值机",
          },
          {
            value: "customer",
            label: "会员",
          },
        ],
        // 分页
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        // // 查询
        Thequery: {
          caseId: null,
          caseStatus: "",
          afterTime: "",
          agoTime: "",
          orderId: "",
          orderType: "",
          customerId: "",
          phone: "",
        },
        // 时间
        CX: {
        date1: new Date(new Date() - (3600 * 1000 * 24 * 7 + 1000))
          .toLocaleDateString()
          .replace(/\//g, "-"), //   日期时间
        date2: new Date(new Date().getTime() +86400000).toLocaleDateString().replace(/\//g, "-"),
      },
        // 工单列表
        Therepairorder: [],

        // 状态待处理 = 0,处理完 = 1,
        condition: [{
            value: 0,
            label: "待处理",
          },
          {
            value: 1,
            label: "处理完",
          },
          {
            value: 2,
            label: "废弃",
          },
        ],
        // 人员下拉
        postslists: [],
        // 新建弹窗
        centerDialogVisible: false,
        // 创建订单
        repairOrder: {
          caseSubject: "",
          caseSubject: "",
          caseType: "",
          caseSubType: "",
          caseContent: "",
          receivingDepartment: "",
          receiver: "",
          specifiedTime: "",
          workOrderType: "",
          respondent: "",
          complainWay: "",
          complaintReason: "",
          complaintDate: "",
          complaintClassification: "",
          customerPhone: "",
          compensationAmount: "",
          caseTypeId: "",
          orderType: "",
          orderId: "",
          solveContent:""//投诉结果
        },
        // 会员信息查询
        customerrepairorder: {
          customerName: "",
          customerCard: "",
          customerPhone: "",
        },
        // 初始化数据
        inputaaa: "",
        inputaadf: "",
        compensateType: [],
        compensationType: [],
        input: "",
        textarea2: "",
        radio: "1",
        // 赔偿金额
        compensationAmounts: [],
        // 部门
        departmentList: [],
        // 时间

        // 工单小类
        workOrderTypeList: [],
        // 投诉分类列表
        complainClassifyList: [],
        // 选中理赔
        serviceCompensation: [],
        // 工单类型下拉框
        gongdanType: [{
          value: "complaint",
          label: "投诉工单",
        }, ],
        cardTypeList: [],
        // 卡类型下拉菜单
        // cardTypeList: [
        //   {
        //     value: "silver",
        //     label: "白银会员",
        //   },
        //   {
        //     value: "gold",
        //     label: "黄金会员",
        //   },
        //   {
        //     value: "healthy",
        //     label: "黑金会员·健康卡",
        //   },
        //   {
        //     value: "travel",
        //     label: "黑金会员·出行卡",
        //   },
        // ],
        // 投诉原因
        ReasonList: [],
        // 投诉方式
        MeansList: [],
        // 投诉结果
        ReaultList: [],
        workOrderType: [{
            value: "ordinary",
            label: "普通",
          },
          {
            value: "derelictionDuty",
            label: "渎失职",
          },
          {
            value: "claim",
            label: "理赔",
          },
          {
            value: "complaint",
            label: "投诉",
          },
        ],
      };
    },
    methods: {
      // cardTypeList
      getcardlist() {
        this.$axios.getcardlist({}).then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.cardTypeList = res.data;
            this.cardTypeList.forEach((item) => {
              item.cardId = String(item.cardId);
            });
            console.log(this.cardTypeList);
          }
        });
      },

      // 通过当前部门id查询员工
      selectMent() {
        this.postslist();
      },
      // 连带人员搜索员工
      postslist() {
        localStorage.removeItem("pageSize");
        localStorage.removeItem("pageNum");
        this.$axios
          .postslist({
            deptId: this.repairOrder.receivingDepartment,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              localStorage.setItem("pageSize", 10);
              localStorage.setItem("pageNum", 1);
              let list = JSON.parse(JSON.stringify(res.data));
              this.postslists = list.map((item) => {
                return {
                  label: item.employeeName,
                  value: item.employeeId
                };
              });
              console.log(this.postslists);
            }
          });
      },
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getbackGuaranteeCaseById();
        this.pageSize = value;
      },
      search() {
        localStorage.setItem("pageNum", this.currentPage);
        localStorage.setItem("pageSize", 10);
        this.getbackGuaranteeCaseById();
      },
      handleCurrentChange(value) {
        console.log("2", value);
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getbackGuaranteeCaseById();
        // orders = res.data;
      },
      // 修改
      Workorderdetails(row) {
        console.log(row, 124312);
        this.$router.push({
          name: "caseComplaintmodify",
          params: {
            caseComplaintId: row.caseComplaintId,
            caseId: row.caseId,
          },
        });
      },
      seachBtn() {
        localStorage.setItem("pageSize", 10);
        localStorage.setItem("pageNum", 1);
        this.getbackGuaranteeCaseById()
      },
      // 查询工单
      getbackGuaranteeCaseById() {
        this.$axios
          .getbackGuaranteeCaseById({
            caseId: Number(this.Thequery.caseId),
            caseStatus: this.Thequery.caseStatus,
            afterTime: this.CX.date1 ? this.CX.date1 : "",
            agoTime: this.CX.date2 ? this.CX.date2 : "",
            orderId: this.Thequery.orderId,
            orderType: this.Thequery.orderType,
            customerId: this.Thequery.customerId,
            phone: this.Thequery.phone,
            type: "complaint",
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.total = res.total;
              // 工单列表数据
              this.Therepairorder = res.data;
              this.pageTotal = res.total;
            }
          });
      },

      casesave() {
        if (this.customerrepairorder.customerPhone == "") {
          this.$message({
            message: "请先查询会员信息",
            type: "warning",
          });
        }
        this.getbackGuaranteeCase();
      },
      // 创建工单
      getbackGuaranteeCase() {
        if(this.repairOrder.compensationAmount ==''){
            this.$message({
            message: "请输入赔偿金额",
            type: "warning",
          });
        }else{
  localStorage.setItem("isToken", true);
        // if (this.customerrepairorder.customerCardType == "黑金会员·健康卡") {
        //   this.customerrepairorder.customerCardType = "healthy";
        // }
        // if (this.customerrepairorder.customerCardType == "体验会员") {
        //   this.customerrepairorder.customerCardType = "experience";
        // }
        // if (this.customerrepairorder.customerCardType == "白银会员") {
        //   this.customerrepairorder.customerCardType = "silver";
        // }
        // if (this.customerrepairorder.customerCardType == "黄金会员") {
        //   this.customerrepairorder.customerCardType = "gold";
        // }
        // if (this.customerrepairorder.customerCardType == "黑金会员·出行卡") {
        //   this.customerrepairorder.customerCardType = "travel";
        // }
        let complaintVo={}
        if(this.repairOrder.complainWay!=''){
          complaintVo = {
          customerPhone: this.repairOrder.customerPhone,
          compensationAmount: this.repairOrder.compensationAmount,
          customerComplaintVo: {
            respondent: this.repairOrder.respondent,
            complainWay: this.repairOrder.complainWay,
            complaintReason: this.repairOrder.complaintReason,
            complaintDate: this.repairOrder.complaintDate,
            complaintClassification: this.repairOrder.complaintClassification,
          },
          compensationVoList: [{
            serviceCompensation: this.serviceCompensation, //服务赔偿
            compensationAmount: this.compensationAmount, //赔偿金额
          }, ],
        };
        }else{
         complaintVo = null
        }
        this.$axios
          .getbackGuaranteeCase({
            type: "Crm",
            workOrderType: this.repairOrder.workOrderType,
            complaintVo: complaintVo,
            // compensationVoList: [
            //   {
            //     serviceCompensation: this.serviceCompensation, //服务赔偿
            //     compensationAmount: this.compensationAmount, //赔偿金额
            //   },
            // ],
            // 会员卡号
            cardNum: this.customerrepairorder.customerCard,
            customerName: this.customerrepairorder.customerName,
            customerPhone: this.customerrepairorder.customerPhone,
            // 卡类型
            cardType: this.customerrepairorder.level,
            //  工单标题
            caseSubject: this.repairOrder.caseSubject,
            caseType: "complaint",
            type: "Crm",
            caseSubType: this.repairOrder.caseSubType,
            caseContent: this.repairOrder.caseContent,
            // receivingDepartment: String(this.repairOrder.receivingDepartment),
            receiver: this.employeesInformation.employeeId,
            specifiedTime: this.repairOrder.specifiedTime,
            caseSubject: this.repairOrder.caseSubject,
            caseTypeId: this.repairOrder.caseTypeId,
            orderType: this.repairOrder.orderType,
            orderId: this.repairOrder.orderId,
            solveContent:this.repairOrder.solveContent,
            createEmployeeId: JSON.parse(localStorage.getItem('employeesInformation')).employeeId, //创建人
            receivingDepartment:JSON.parse(localStorage.getItem('employeesInformation')).deptId,
          })
          .then((res) => {
            
            console.log(res);
            if (res.code == "200") {
              this.centerDialogVisible = false;
              this.getbackGuaranteeCaseById();
              this.$message({
                message: "新增成功",
                type: "success",
              });
            }
          });
        }
      
      },
      // 保存按钮

      // 服务赔偿事件
      changeList(row) {
        // let arr = this.compensateType
        // console.log(this.compensateType)
        // arr[row].is = !arr[row].is
        // let arr1 = []
        // arr1 = arr.filter((item)=>{
        //     return item.is
        // });
        // this.servicepComensation = arr1
        // console.log(this.servicepComensation)
        this.serviceCompensation = row;
      },
      // 赔偿金额事件
      compensationAmountList(row) {
        console.log(row);
        this.compensationAmount = row;
      },
      // 服务赔偿列表
      getcaseReimbTypeList() {
        this.$axios.getcaseReimbTypeList({}).then((res) => {
          if (res.code == "200") {
            let arr = JSON.parse(JSON.stringify(res.data));
            arr.forEach((item) => {
              item.is = false;
            });
            this.compensateType = arr;
            console.log(this.compensateType);
          }
        });
      },
      // 投诉结果
      getselectReaultList() {
        this.$axios.getselectReaultList({}).then((res) => {
          console.log(res);
          if (res.code == "200") {
            let list = JSON.parse(JSON.stringify(res.data));
            this.ReaultList = list.map((item) => {
              return {
                label: item.complaintReault,
                value: item.complaintReaultId,
              };
            });
            console.log(this.ReaultList);
          }
        });
      },
      // 投诉分类
      getselectTypeList() {
        this.$axios.getselectTypeList({}).then((res) => {
          console.log(res);
          if (res.code == "200") {
            let list = JSON.parse(JSON.stringify(res.data));
            this.complainClassifyList = list.map((item) => {
              return {
                label: item.complaintType,
                value: item.complaintTypeId,
              };
            });
            console.log(this.complainClassifyList);
          }
        });
      },
      // 投诉原因
      getselectReasonList() {
        this.$axios.getselectReasonList({}).then((res) => {
          console.log(res);
          if (res.code == "200") {
            let list = JSON.parse(JSON.stringify(res.data));
            this.ReasonList = list.map((item) => {
              return {
                label: item.complaintReason,
                value: item.complaintReasonId,
              };
            });
            console.log(this.ReasonList);
          }
        });
      },
      // 投诉方式
      getselectMeansList() {
        this.$axios.getselectMeansList({}).then((res) => {
          console.log(res);
          if (res.code == "200") {
            let list = JSON.parse(JSON.stringify(res.data));
            this.MeansList = list.map((item) => {
              return {
                label: item.complaintMeans,
                value: item.complaintMeansId,
              };
            });
            console.log(this.MeansList);
          }
        });
      },
      // 创建部门
      geteedepartmentlist() {
        this.$axios.geteedepartmentlist({}).then((res) => {
          console.log(res);
          if (res.code == "200") {
            let list = JSON.parse(JSON.stringify(res.data));
            this.departmentList = list.map((item) => {
              return {
                label: item.deptName,
                value: item.deptId,
              };
            });
            console.log(this.departmentList);
          }
        });
      },
      // 工单小类
      getselectworkOrderType() {
        this.$axios.getselectworkOrderType({}).then((res) => {
          console.log(res);
          if (res.code == "200") {
            let list = JSON.parse(JSON.stringify(res.data));
            let list1 = [];
            list1 = list.filter((item) => {
              return item;
            });
            console.log(list1);
            this.workOrderTypeList = list1.map((item) => {
              if (item == null) {} else {
                return {
                  label: item.workOrderType,
                  value: item.caseSubTypeId,
                };
              }
            });
            console.log(this.workOrderTypeList);
          }
        });
      },
      // 会员信息查询按钮
      thequery() {
        if (
          this.customerrepairorder.customerName == "" &&
          this.customerrepairorder.customerCard == "" &&
          this.customerrepairorder.customerPhone == ""
        ) {
          this.$message({
            message: "请通过手机号,会员卡号或姓名 查询会员",
            type: "warning",
          });
        } else {
          this.getcustomerId();
        }
      },
      // 会员信息查询
      getcustomerId() {
        this.$axios
          .getcustomerId({
            customerName: this.customerrepairorder.customerName,
            customerCard: this.customerrepairorder.customerCard,
            customerPhone: this.customerrepairorder.customerPhone,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.customerrepairorder = res.data;
            }
          });
      },

      // 工单分类列表
      getlists() {
        this.$axios.getlists({}).then((res) => {
          if (res.code == "200") {
            console.log(res);
            this.orderLedger = res.data;
          }
        });
      },
    },
    mounted() {
      this.employeesInformation = JSON.parse(
        localStorage.getItem("employeesInformation")
      );
      console.log(this.employeesInformation);
      this.seachBtn()
      this.getselectTypeList();
      // 投诉结果
      this.getselectReaultList();
      // 投诉原因
      this.getselectReasonList();
      // 投诉方式
      this.getselectMeansList();
      // 服务赔偿
      this.getcaseReimbTypeList();
      // 创建部门
      this.geteedepartmentlist();
      // 工单小类
      this.getselectworkOrderType();
      this.getcardlist();
      this.getlists();
      // 员工列表
      this.postslist();
    },
  };
</script>

<style scoped>
  .caseComplaintsbody {
    margin: 20px;
  }

  .caseComplaints {
    margin: auto;
    margin: 20px;
    width: 90%;
    border: 1px solid #add8ea;
  }

  .flex {
    display: flex;
    margin-bottom: 10px;
  }

  .flex_x {
    width: 40%;
    display: flex;
    margin-top: 10px;
  }

  .flex_y {
    width: 80%;
    display: flex;
    margin-top: 10px;
  }

  .tdboder {
    border: 0.5px solid #add8ea;
  }

  .td-1 {
    width: 150px;
    background-color: #f2f7fa;
  }

  .flex_b {
    display: flex;
    justify-content: center;
    padding: 5px;
  }

  .flex_a {
    display: flex;
    margin-right: 20px;
  }

  .line {
    width: 100%;
    height: 1px;
    background-color: #add8ea;
  }

  .tousucss {
    width: 100px;
    height: 400px;
    line-height: 400px;
  }

  .serviceCompensation {
    width: 700px;
    background-color: #bbd9e6;
    border: 1px solid #3f7e99;
  }

  .serviceCompensation-bottom {
    width: 700px;
    border: 1px solid #3f7e99;
    border-top: 0px solid #3f7e99;
  }

  .service-left {
    margin-left: 10px;
    width: 350px;
    border-right: 1px solid #488ba8;
  }

  .service-right {
    width: 350px;
    text-align: center;
  }

  .tou {
    width: 3.5px;
    height: 17px;
    background-color: #4b71bf;
    margin-top: 2px;
    margin-right: 4px;
    font-size: 12px;
    margin-bottom: 25px;
  }

  .header-1-1 {
    font-weight: bolder;
    display: flex;
    margin-left: 20px;
    padding-top: 20px;
  }

  .header-1-1-1 {
    font-weight: bolder;
    display: flex;
    margin-left: 20px;
    /* padding-top: 20px; */
  }

  .invoice {
    width: 97%;
    margin: auto;
    display: flex;
    height: 44px;
    margin-bottom: 20px;
    min-width: 1200px;
  }

  .invoice-1 {
    margin-right: 20px;
  }

  .invoice-2 {
    margin-left: 20px;
  }

  .tuo-1 {
    display: flex;
  }

  .tuo-2 {
    width: 3.5px;
    height: 17px;
    background-color: #4b71bf;
    margin-top: 2px;
    margin-right: 4px;
    font-size: 12px;
    margin-bottom: 25px;
  }

  .tuo {
    font-weight: bolder;
    display: flex;
    margin-left: 20px;
    padding-top: 20px;
    justify-content: space-between;
    margin-right: 20px;
  }
</style>